<template>
  <div>
    <el-row>

      <!--当HomeHeader触发了this.emits函数后，具体传入的参数，就会在这里拿到-->
      <!--$event这个值，就是在HomeHeader里面传过来参数-->
      <!--把$event值，赋值给当前HomeFrame组件中定义的serachVal变量-->
      <HomeHeader @getSearchVal="searchVal = $event"/>


    </el-row>
    <el-row>
      <el-col :span="4">
        <HomeMenu />
      </el-col>
      <el-col :span="16" class="bg-light">
        <router-view></router-view>
      </el-col>
      <el-col :span="4" class="bg-light ps-3 pt-2">
        <HomeRank />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HomeHeader from "./HomeHeader.vue";
import HomeMenu from "./HomeMenu.vue";
import HomeRank from "./HomeRank.vue";

export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeMenu,
    HomeRank,
  },
};
</script>

<style>
</style>